<template>
	<view class="page_view" v-if="express">
		<!-- <view class="goods_top">
			<image src="" class="goods_top_img" mode=""></image>
			<view class="goods_top_stuts">
				待揽收
			</view>
		</view> -->
		<view class="wuliu_card" v-if="false">
			<view class="wuliu_card_title">
				快递已放至代收点
			</view>
			<view class="wuliu_card_min">
				<view class="wuliu_card_min_left">
					<text>北京朝阳街道建国路108号门口架子 ｜</text>
					<text class="wuliu_card_min_left_color">北京朝阳街道建国路108号 九层 802室</text>
				</view>
				<image src="/static/images/user/phone.png" class="wuliu_card_min_right" mode=""></image>
			</view>
			<view class="wuliu_card_bottom">
				取件码: <text class="wuliu_card_bottom_num">2-1-1304</text>
			</view>
		</view>
		<view class="logistics-name">
			<view class="logistics-name-left">
				<image :src="baseUrl.cdnurl+express.kuaidi.logo" class="logistics-name-left-img" mode=""></image>
				<view class="logistics-name-left-text">
					{{express.kuaidi.name}}:{{express.express_no}}
				</view>
			</view>
			<view class="fuzhi" @tap="fuzhi">
				复制
			</view>
		</view>
		<!-- 时间轴 -->
		<view class="wuliu_zhou">
			<view class="wuliu_zhou_view">
				<!-- 左侧竖条 -->
				<view class="wuliu_zhou_view_tiao"></view>
				<view class="wuliu_zhou_view_right">
					<view class="wuliu_zhou_view_right_item" v-for="(item,index) in express.express" :key="index">
						<view class="wuliu_zhou_view_right_list_item">
							<view :class="['wuliu_zhou_view_right_list_item_left',(item.type== 0|| item.type== 2)?'wuliu_zhou_view_right_list_item_left':'qu'] ">
								{{item.type == 0?'揽':item.type == 1?'派':'收'}}
							</view>
							<view class="wuliu_zhou_view_right_list_item_left_text">
								<view class="shijian_text_top">
									{{item.time}}
								</view>
								<view class="shijian_text_bottom old_lits">
									{{item.step}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import config from '@/utils/base.js';
	export default {
		data() {
			return {
				wuliu_list:[
					
				],
				express:'',
				baseUrl:config
			}
		},
		onLoad(option) {
			this.loadData({
				id: option.id
			});
		},
		methods: {
			// 获取订单
			async loadData(data) {
				let t = this
				this.$api.post({
					url: '/wanlshop/order/getLogistics',
					loadingTip: '加载中',
					data: data,
					success: res => {
						t.express = res.data
						for(let item of t.express.express){
							item.type = 1
							if(item.step.includes('揽收')){
								item.type = 0
							}
							if(item.step.includes('签收')){
								item.type = 2
							}
							
						}
					}
				});
			},
			fuzhi(){
				let t = this
				uni.setClipboardData({
					data: t.express.express_no,
					success: function () {
						uni.showToast({
							title:'复制成功',
							icon:'none'
						})
					}
				});
			}
		}
	}
</script>

<style scoped>
	.martop{
		margin-top: 20rpx;
	}
	.page_view {
		padding: 0 32rpx;
	}

	.goods_top {
		padding-top: 14rpx;
		display: flex;
		align-items: center;
	}

	.goods_top_stuts {
		font-size: 30rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #262626;
		margin-left: 20rpx;
	}

	.goods_top_img {
		width: 72rpx;
		height: 72rpx;
		border-radius: 4rpx;
		opacity: 1;
		border: 2rpx solid #F4F4F4;
	}

	.wuliu_card {
		width: 100%;
		height: 258rpx;
		background: linear-gradient(271deg, #262626 0%, #3F3F3F 100%);
		border-radius: 12rpx;
		padding: 26rpx 32rpx;
		box-sizing: border-box;
		margin-top: 32rpx;
	}

	.wuliu_card_title {
		font-size: 30rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: rgba(255, 255, 255, 0.9);
	}

	.wuliu_card_min_left {
		font-size: 26rpx;
		font-family: Source Han Sans CN-Normal, Source Han Sans CN;
		font-weight: 400;
		color: rgba(255, 255, 255, 0.9);
	}

	.wuliu_card_min_right {
		min-width: 64rpx;
		width: 64rpx;
		height: 64rpx;
		margin-left: 44rpx;
	}

	.wuliu_card_min_left_color {
		color: #999999;
	}

	.wuliu_card_min {
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-top: 14rpx;
	}

	.wuliu_card_bottom {
		font-size: 26rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: rgba(255, 255, 255, 0.9);
		margin-top: 14rpx;
	}

	.wuliu_card_bottom_num {
		font-size: 35rpx;
		font-family: Source Han Sans CN-Bold, Source Han Sans CN;
		font-weight: bold;
		color: #F4895E;
		margin-left: 12rpx;
	}

	.fuzhi {
		width: 64rpx;
		height: 34rpx;
		border: 1rpx solid #999999;
		text-align: center;
		line-height: 30rpx;
		font-size: 20rpx;
		font-family: Source Han Sans CN-Normal, Source Han Sans CN;
		font-weight: 400;
		color: #262626;
	}

	.logistics-name {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 32rpx;
	}

	.logistics-name-left {
		display: flex;
		align-content: center;
	}

	.logistics-name-left-img {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		background-color: #262626;
	}

	.logistics-name-left-text {
		font-size: 24rpx;
		font-family: Source Han Sans CN-Normal, Source Han Sans CN;
		font-weight: 400;
		color: #262626;
		margin-left: 16rpx;
	}

	.wuliu_zhou {
		width: 100%;
		height:calc(100vh - 200rpx);
		overflow-y: auto;
		/* border: #262626 solid 2rpx; */
		margin-top: 20rpx;
		padding-bottom: 100rpx;
	}

	.wuliu_zhou_view {
		width: 100%;
		height: auto;
		display: flex;
	}

	.wuliu_zhou_view_tiao {
		width: 2rpx;
		/* height: 100%; */
		background-color: #E4E4E4;
		position: relative;
		left: 20rpx;
	}

	.wuliu_zhou_view_right {
		width: 100%;
		position: relative;
		z-index: 9;
	}

	.fist-item {
		margin-top: 0rpx !important; 
	}

	.wuliu_zhou_view_right_list_item {
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-top: 38rpx;
	}

	.wuliu_zhou_view_right_list_item_left {
		width: 40rpx;
		height: 40rpx;
		background: #C4C4C4;
		border-radius: 50%;
		color: #fff;
		font-size: 20rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		line-height: 40rpx;
		text-align: center;
		position: relative;
	}

	.wuliu_zhou_view_right_list_item_left_text {
		width: 626rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN-Normal, Source Han Sans CN;
		font-weight: 400;
		color: #626262;
		margin-top: 6rpx;
	}

	.qu {
		background-color: #262626 !important;
	}

	.qu_text {
		font-size: 26rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #262626;
	}

	.shijian {
		background-color: transparent !important;
	}

	.shijian_dian {
		width: 12rpx;
		height: 12rpx;
		border-radius: 50%;
		background-color: #262626;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.shijian_text {
		position: relative;
		top: 8rpx;
	}

	.shijian_text_bottom {
		width: 626rpx;
		/* height: 112rpx; */
		background: #F4F4F4;
		border-radius: 8rpx;
		opacity: 1;
		border: 2rpx solid #F4F4F4;
		margin-top: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.old_lits {
		color: #999999;
	}
</style>